<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Font</title>
  <style>
    *{
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .font{
      margin: 50px auto;
      position: relative;
      width: 500px;
      /* height: 1000px; */
      border: 1px solid gray;
      font-size: 12px;
    }
    .font>div{
      width: 400px;
      height: 100px;
      border: 1px dashed gray;
    }
    .font-basic{
      font-variant: petite-caps;
      font-style: italic;
      /* font-size: xx-large; */
      /* font-family: 'Courier New', Courier, monospace; */
      font-stretch: ultra-expanded;
      font-size-adjust: .1;
    }
    .text-tarnsform{
      text-transform: capitalize;
      white-space: normal;
      tab-size: initial;
    }
    .word-break{
      word-break: keep-all;
      word-wrap: break-word;
    }
    .font>.overflow-wrap{
      width: 320px;
      height: 50px;
      overflow-wrap: break-word;
    }
    .font>.text-align{
      width: 500px;
      text-align: right;
    }
    .text-align-last{
      text-align-last: right;
      word-spacing: 1px;
      letter-spacing: 1px;  /* 字符、文字间间距 */
      text-indent: 1px; /* 首行缩进 */
    }
    .text-size-adjust{
      text-size-adjust: auto;
    }
    .text-decoration{
      text-decoration: line-through;
      text-decoration-color: hotpink;
      text-decoration-style: dotted;
      -webkit-text-decoration-skip: objects;
      -moz-text-decoration-skip: objects;
      text-decoration-skip: objects;
      text-underline-position: left;
      text-shadow: 1px 2px 3px red;
      direction: rtl;
    }
    .writing-mode{
      writing-mode: vertical-lr;
    }
    .counter-increment{
      counter-reset: section;
    }
    .counter-increment>h2{
      counter-reset: subsection;
    }
    .counter-increment>h2::before{
      counter-increment: section;
      content: counter(section) "、";
    }
    .counter-increment>h4::before{
      counter-increment: subsection;
      content: counter(section) "." counter(subsection) "、";
    }
    .counter-increment>p{
      quotes: "<--" "-->";
    }
    .counter-increment>::before{
      content: open-quote;
    }
    .counter-increment>p::after{
      content: close-quote;
    }
    .inherit{
      position: relative;
      margin-left: 10px;
    }
    .inheritChild{
      position: inherit;
      margin-left: inherit;
    }
    .string::after{
      /* content: "伪类设置string\String\"""; */
      content: "任意字符串\"String\"";
    }
    .identifier>ul>li{
      counter-increment: testname;
      counter-reset: testname2;
    }
    @keyframes testanimations {
      from { opacity:1; }
      to { opacity:0; }
    }
  </style>
</head>
<body>
  <h1>使用有标题的系统控件的文本字体</h1>
  <div class="font">
    <div class="font-basic">
      caption：
      使用有标题的系统控件的文本字体（如按钮，菜单等）（CSS2）
      icon：
      使用图标标签的字体（CSS2）
      menu：
      使用菜单的字体（CSS2）
      message-box：
      使用信息对话框的文本字体（CSS2）
      small-caption：
      使用小控件的字体（CSS2）
      status-bar：
      使用窗口状态栏的字体（CSS2）
    </div>
    <div class="text-tarnsform">
      none：
      无转换
      capitalize：
      将每个单词的第一个字母转换成大写
      uppercase：
      将每个单词转换成大写
      lowercase：
      将每个单词转换成小写
      full-width：
      将所有字符转换成fullwidth形式。如果字符没有相应的fullwidth形式，将保留原样。这个值通常用于排版拉丁字符和数字等表意符号。（CSS3）
    </div>
    <div class="word-break">
      normal：
      依照亚洲语言和非亚洲语言的文本规则，允许在字内换行。
      keep-all：
      与所有非亚洲语言的normal相同。对于中文，韩文，日文，不允许字断开。适合包含少量亚洲文本的非亚洲文本。
      break-all：
      该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本，比如使连续的英文字母间断行。
    </div>
    <div class="overflow-wrap">
      normal：
      允许内容顶开或溢出指定的容器边界。
      break-word：
      内容将在边界内换行。如果需要，单词内部允许断行。
    </div>
    <div class="text-align">
      left：内容左对齐。
      center：内容居中对齐。
      right：内容右对齐。
      justify：内容两端对齐，但对于强制打断的行（被打断的这一行）及最后一行（包括仅有一行文本的情况，因为它既是第一行也是最后一行）不做处理。（CSS3）
      start：内容对齐开始边界。（CSS3）
      end：内容对齐结束边界。（CSS3）
      match-parent：这个值和 inherit 表现一致，只是该值继承的 start 或 end 关键字是针对父母的 <' direction '> 值并计算的，计算值可以是 left 和 right 。（CSS3）
      justify-all：效果等同于 justify，但还会让最后一行也两端对齐。（CSS3）
    </div>
    <div class="text-align-last">
      设置或检索一个块内的最后一行（包括块内仅有一行文本的情况，这时既是第一行也是最后一行）或者被强制打断的行的对齐方式
如果某一行同时也是块内的第一行或者第一行但后面紧跟着强制换行，除非显示的指定 <' text-align '> 第一行对齐方式（值 'start end'），否则 <' text-align-last '> 将会覆盖 <' text-align '>；
如果auto值被指定，内容的对齐方式将依据 <' text-align '> 的设定，除非 <' text-align '> 设置为justify；
    </div>
    <div class="vertical-align">
      baseline：
把当前盒的基线与父级盒的基线对齐。如果该盒没有基线，就将底部外边距的边界和父级的基线对齐
sub：
把当前盒的基线降低到合适的位置作为父级盒的下标（该值不影响该元素文本的字体大小）
super：
把当前盒的基线提升到合适的位置作为父级盒的上标（该值不影响该元素文本的字体大小）
text-top：
把当前盒的top和父级的内容区的top对齐
text-bottom：
把当前盒的bottom和父级的内容区的bottom对齐
    </div>
    <div class="text-size-adjust">
      检索或设置移动端页面中对象文本的大小调整。
      该属性只在移动设备上生效；
      如果你的页面没有定义meta viewport，此属性定义将无效；
      对应的脚本特性为textSizeAdjust。
    </div>
    <div class="text-decoration">
      复合属性。检索或设置 对象中的 文本的 装饰。
    </div>
    <div class="writing-mode">
      horizontal-tb：
      水平方向自上而下的书写方式。即 left-right-top-bottom（类似IE私有值lr-tb）
      vertical-rl：
      垂直方向自右而左的书写方式。即 top-bottom-right-left（类似IE私有值tb-rl）
      vertical-lr：在垂直方向上从上向下流入，自右向左。后一竖行在前一竖行的左面。全角字符是竖直向上的，半角字符如拉丁字母或片假名顺时针旋转90度。这种布局是东亚语系通常使用的（IE）
    </div>
    <div class="counter-increment">
      <p>counter-increment111</p>
      <h2>123</h2>
      <h4>321</h4>
      <h2>ads</h2>
      <h4>5516</h4>
      <!-- <select name="increment" id="increment">
        <option value="wei">wei</option>
        <option value="sha">sha</option>
        <option value="bu">bu</option>
        <option value="shuo">shuo</option>
        <option value="hua">hua</option>
      </select> -->
    </div>
    <div class="inherit">
      <div class="inheritChild">继承父元素属性</div>
    </div>
    <div class="string">

    </div>
    <div class="identifier">
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
      </ul>
    </div>
  </div>
</body>
</html>